<div class="content">
    <div id="example_title">
        <h1>Tooltips</h1>
        Below is an example of how to define tooltips for the tabs.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="tabs" style="width: 100%;"></div>
<div id="selected-tab" style="padding: 10px 0px">tab1</div>
<br>
Tooltip position:<br>
<div style="padding: 10px">
    <label><input type="radio" name="position" onclick="setTooltip('top')" checked>&nbsp;&nbsp;Top</label><br>
    <label><input type="radio" name="position" onclick="setTooltip('bottom')">&nbsp;&nbsp;Bottom</label><br>
    <label><input type="radio" name="position" onclick="setTooltip('left')">&nbsp;&nbsp;Left</label><br>
    <label><input type="radio" name="position" onclick="setTooltip('right')">&nbsp;&nbsp;Right</label><br>
</div>

<!--CODE-->
<script type="module">
import { w2tabs, query } from '__W2UI_PATH__'

let tabs = new w2tabs({
    box: '#tabs',
    name: 'tabs',
    active: 'tab1',
    tabs: [
        { id: 'tab1', text: 'Tab 1', tooltip: 'Tab 1 tooltip text' },
        { id: 'tab2', tooltip: 'Tab 2 tooltip text<br>Can be multi line',
            count: 0,
            text(item) {
                return 'Click me '+ item.count;
            }
        },
        { id: 'tab3', text: 'Tab 4',
            tooltip(item) {
                return 'Can be result of a function ' + Date.now();
            }
        }
    ],
    onClick(event) {
        query('#selected-tab').html(event.target);
        if (event.target == 'tab2') {
            event.detail.tab.count++;
            this.refresh(event.target);
        }
        if (event.target == 'tab3') {
            this.tooltipShow('tab3', null, true);
        }
    }
})

window.setTooltip = function (type) {
    tabs.tooltip = type
    tabs.refresh()
}
</script>
